require(['./config'], () => {
    require(['template', 'header', 'footer', 'toTop'], (template, header) => {
        class Cart {
            constructor() {
                this.init()
                this.toTop()
            }
            init() {
                let cartList = localStorage.getItem('cart')
                if (cartList) {
                    this.cartList = JSON.parse(cartList)
                    $('#shopping_car').html(template('srcShop', { cartList: this.cartList }))
                        // 有数据的话就要默认计算一次总价
                    this.calcTotalMoney()
                        // 给所有单选绑事件
                    this.checksChange()
                    this.cartNumAdd()
                    this.delcart()
                    this.allcheck()
                    header.calcCartNum()
                } else {
                    // 购物车没有数据
                    $('#cart-empty').show()
                }
            }
            calcTotalMoney() {
                $('#Paymoney').html(this.cartList.reduce((money, cart) => {
                    if (cart.check) money += cart.price * cart.num
                    return money
                }, 0).toFixed(2))
            }
            checksChange() {
                const _this = this
                    // 给所有的单选按钮绑事件
                $('#shopping_car .shop_cont input:checkbox').on('change', function() {
                    // 取到当前商品的id
                    let id = $(this).parents('tr').attr('data-id')
                    _this.cartlist = _this.cartList.map(cart => {
                            if (cart.id == id) cart.check = $(this).prop('checked')
                            return cart
                        })
                        // 重新存localStorage
                    localStorage.setItem('cart', JSON.stringify(_this.cartlist))
                        // 全选按钮根据数据是否全选来渲染状态
                    $('#all-check').prop('checked', _this.cartList.every(cart => {
                            return cart.check
                        }))
                        // 计算总价
                    _this.calcTotalMoney()
                })
            }
            cartNumAdd() {
                const _this = this;
                // 减
                $('#shop-list').on('click', '.minus', function() {
                        let shopnum = parseInt($(this).next().val())
                        let id = $(this).parents('tr').attr('data-id')
                        if (shopnum > 1) {
                            shopnum--
                        }
                        $(this).next().attr("value", $(this).next().val(shopnum))

                        _this.cartlist = _this.cartList.map(cart => {
                            if (cart.id == id) {
                                cart.num = shopnum
                                $($(this).parents('tr').children()[4]).html((cart.price * cart.num).toFixed(2))
                                    // $($(this).parents('tr').children()[3]).children().html(((cart.originPrice - cart.price) * cart.num).toFixed(2))
                            }
                            return cart
                        })
                        localStorage.setItem('cart', JSON.stringify(_this.cartlist))
                        _this.calcTotalMoney()
                        header.calcCartNum()
                    })
                    // 加
                $('#shop-list').on('click', '.plus', function() {
                    let shopnum = parseInt($(this).prev().val())
                    let id = $(this).parents('tr').attr('data-id')
                    shopnum++
                    console.log(shopnum)
                    $(this).prev().attr("value", $(this).prev().val(shopnum));
                    _this.cartlist = _this.cartList.map(cart => {
                        if (cart.id == id) {
                            cart.num = shopnum

                            $($(this).parents('tr').children()[4]).html((cart.price * cart.num).toFixed(2))
                                // $($(this).parents('tr').children()[3]).children().html(((cart.originPrice - cart.price) * cart.num).toFixed(2))
                        }
                        return cart
                    })
                    localStorage.setItem('cart', JSON.stringify(_this.cartlist))
                    _this.calcTotalMoney()
                    header.calcCartNum()
                })
                $('#totalNum').html(_this.cartList.reduce((total, cart) => {
                    total += cart.num
                    return total;
                }, 0))
            }
            delcart() {
                const _this = this
                $('#shop-list').on('click', '.delbtn', function() {
                    let id = $(this).parents('tr').attr('data-id')
                    if (confirm("确定要删除该商品吗？")) {
                        _this.cartlist = _this.cartList.filter(cart => {
                            return cart.id != id
                        })
                    }
                    localStorage.setItem('cart', JSON.stringify(_this.cartlist))
                    $(this).parents('tr').remove()
                    let cart = localStorage.getItem('cart')
                    if (cart === "[]") {
                        localStorage.removeItem('cart')
                    }
                    _this.init()
                    _this.calcTotalMoney()
                    header.calcCartNum()
                })
            }
            allcheck() {
                const _this = this;
                $('#all-check').prop('checked', _this.cartList.every(cart => {
                    return cart.check
                }))
                $('#all-check').on('change', function() {
                    _this.cartList = _this.cartList.map(cart => {
                        cart.check = $('#all-check').prop('checked')
                        return cart;
                    })
                    localStorage.setItem('cart', JSON.stringify(_this.cartList))
                    var check = _this.cartList.every(cart => {
                        return cart.check
                    })
                    if (check) {
                        $('input:checkbox').prop('checked', true)
                    } else {
                        $('input:checkbox').prop('checked', false)
                    }
                    _this.calcTotalMoney()
                })
            }
            toTop() {
                $('.totop').toTop();
            }
        }
        new Cart()
    })
})